<template>
	<div class="employee">
		<lRTitle :text="statusTitle"></lRTitle>
		<div class="main">
			<div class="container">
				<div class="block">
					<div class="circle">
						<img src="@/assets/aiScreen/gzzc@2x.png">
					</div>
					<div class="text">
						<span class="text-top">工作资产</span>
						<span class="text-bottom">{{StatusCount.WorkingCount}}</span>
					</div>
				</div>
				<div class="block">
					<div class="circle">
						<img src="@/assets/aiScreen/ylzc@2x.png">
					</div>
					<div class="text">
						<span class="text-top">娱乐资产</span>
						<span class="text-bottom">{{StatusCount.PlayingCount}}</span>
					</div>
				</div>
				<div class="block">
					<div class="circle">
						<img src="@/assets/aiScreen/lkzc@2x.png">
					</div>
					<div class="text">
						<span class="text-top">离开资产</span>
						<span class="text-bottom">{{StatusCount.LeavingCount}}</span>
					</div>
				</div>
				<div class="block">
					<div class="circle">
						<img src="@/assets/aiScreen/qt@2x.png">
					</div>
					<div class="text">
						<span class="text-top">其他</span>
						<span class="text-bottom">{{StatusCount.OtherStatusCount}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
    
<script>
import lRTitle from './lRTitle.vue';
import { connrequest2 } from "@/api/firstPage.js"

export default {
	name: "employeeRank",
	props: {},
	data() {
		return {
			statusTitle: "工作状况",
			StatusCount: {}
		};
	},
	components: {
		lRTitle
	},
	created(){
		this.initData()
	},
	methods: {
    async initData(searchobj = {}) {
      const res = await connrequest2('GetDepartmentDeviceSumTree')
			this.StatusCount = res.Data
    },
  }
};
</script>
    
<style lang="scss" scoped>
.employee {
	position: relative;
	height: 28%;
	/* 使用视口高度单位，或根据需要调整 */
}

.main {
	height: calc(100% - 50px);
	display: flex;
	align-items: center;
	justify-content: center;

	.container {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1vw;
		/* 水平和垂直间隔均为 30px */
		width: 460px;
		/* 2 × 200px 块 + 30px 间隔 + 边距 */
		margin: 0 auto;

		/* 居中 */
		.block {
			width: 45%;
			height: 5vh;
			padding: 10px;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;

			.circle {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60px;
				height: 60px;
				/* 示例颜色，可替换为图片 */
				margin-right: 10px;
				/* 圆形与文字间隔 */
				flex-shrink: 0;

				/* 防止圆形被压缩 */
				img {
					width: 100%;
				}
			}

			.text {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				/* 占据剩余空间 */
			}

			.text-top {
				font-size: 14px;
				color: #9ba1a8;
				/* 上行文字颜色 */
				line-height: 1.4;
				/* 行高调整间距 */
				background: url('../../../assets/aiScreen/wz_bg.png');
				padding-top: 3px;
				padding-left: 10px;
				margin-bottom: 5px;
			}

			.text-bottom {
				font-size: 18px;
				color: #FEFEFE;
				font-weight: 600;
				padding-left: 10px;
				/* 下行文字颜色 */
				line-height: 1.4;
			}
		}
	}
}
</style>